<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>统计</title>
  <!--[if lt IE 9]>
  <script src="libs/html5shiv.min.js"></script>
  <script src="libs/respond.min.js"></script>
  <![endif]-->
  <script src="libs/jquery-1.12.1.min.js"></script>
  <link href="libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="libs/bootstrap-3.3.6/js/bootstrap.min.js"></script>
  <script src="libs/handlebars.min.js"></script>
  <script src="libs/d3.v3.min.js"></script>
  <script src="libs/nv.d3.min.js"></script>
  <link href="libs/nv.d3.min.css" rel="stylesheet">
</head>
<body>
 <div class="container">
   <div class="row">
    <div class="page-header">
     <h2 class="text-center"><strong>记账系统</strong></h2>  
    </div>
  </div>
</div>
<div class="container">
   <div class="row">
    <div class="col-md-8">
     <ul class="nav nav-pills">
      <li><a href="index.html">首页</a> </li>
      <li><a href="newpay.html">新加支出</a> </li>
      <li><a href="newin.html">新加收入</a> </li>
      <li class="active"><a href="tongji.html">统计</a> </li>
      <li><a href="query.html">查询</a> </li>
      <li><a href="#"><span id="nickname">用户</span></a></li>
     </ul>
 </div>
  </div>
</div>
<div class="container">
   <div class="row">
    <div class="col-md-12">
     <hr />  
    </div>
  </div>
</div>
<div class="container">
   <div class="row"> 
    <div class="col-md-6">
    <p>当月的收入</p>
    <h4 id="haha">16,17</h4>
    </div>
    <div class="col-md-6">
     <p>当月的支出</p>
      <h4 id="enen">18，24</h4>
    </div>
   </div>
   <div class="row">
    <div class="col-md-12">
    <p>类别支出记录</p>
    <div id="list1"></div>
     </div>
   </div>
    <div class="row">
    <div class="col-md-12">
    <p>类别收入记录</p>
    <div id="list2"></div>
     </div>
   </div>
</div>
<div class="container">
		<div class="row">
			<div class="col-md-6" id="chart">
				<p class="text-center">
				<br/>
				<hr/>
				<strong>支出使用统计</strong>
				<svg style="height:480px;width:100%"></svg>
				<br/>
				</p>
			</div>
		</div>
	</div>
<div class="container">
		<div class="row">
			<div class="col-md-6" id="chart1">
				<p class="text-center">
				<br/>
				<hr/>
				<strong>收入情况统计</strong>
				<svg style="height:480px;width:100%"></svg>
				<br/>
				</p>
			</div>
		</div>
	</div>
<script type="text/x-handlebars-template" id="template" >
  {{#each item}}
     <div class="panel panel-default col-md-3">
       <div class="panel-body">
         <dl>
            <dt>总和</dt><dd>{{suin}}</dd>
            <dt>类别</dt><dd>{{kin}}</dd>
            <dt>平均</dt><dd>{{avgin}}</dd>
         
            
        </dl>
      </div>
    </div>
  {{/each}}
{{#each item1}}
     <div class="panel panel-default col-md-3">
       <div class="panel-body">
         <dl>
            <dt>总和</dt><dd>{{suin}}</dd>
            <dt>类别</dt><dd>{{kin}}</dd>
            <dt>平均</dt><dd>{{avgin}}</dd>
            
           
        </dl>
      </div>
    </div>
  {{/each}}
</script>


<script type="text/javascript" >
      $(function(){
	    $.getJSON('querymoneyout.action',function(res){
	    	console.log(res);
	    	$('#enen').text(res[0].t1);
	    	
	    });
	    $.getJSON('querymoneyin.action',function(res){
	    	console.log(res);
	    	$('#haha').text(res[0].t2);
	    	
	    });
	    $.getJSON('querymouthout.action',function(res){
	    	console.log(res);
	    	var data ={'item':res};
	    	var t=Handlebars.compile($('#template').html());
	    	$('#list1').html(t(data));
	    });
	    
	    
	    $.getJSON('querymouthin.action',function(res){
	    	console.log(res);
	    	var data ={'item1':res};
	    	var t=Handlebars.compile($('#template').html());
	    	$('#list2').html(t(data));
	    });
	    
	    
	    $.getJSON('querymouthin.action',function(res){
	    	nv.addGraph(function() {
	    		var chart =nv.models.pieChart()
	    		.x(function(d){
	    			return d.kin
	         }).y(function(d){
	        	 return d.suin
	         }).showLabels(true)
	         .labelType('percent');
	    		d3.select('#chart svg')
	    		.datum(res)
	    		.transition().duration(350)
	    		.call(chart);
	    		return chart;
	         });
	 });
	    $.getJSON('querymouthout.action',function(res){
	    	nv.addGraph(function() {
	    		var chart1 =nv.models.pieChart()
	    		.x(function(d){
	    			return d.kin
	         }).y(function(d){
	        	 return d.suin
	         }).showLabels(true)
	         .labelType('percent');
	    		d3.select('#chart1 svg')
	    		.datum(res)
	    		.transition().duration(350)
	    		.call(chart1);
	    		return chart1;
	         });
	 });
      });
</script>



</body>
</html>